<template>
	<div class="subpage status">
		<div class="content">
			<div class="status-imgbox">
				<img src="@/assets/img/home_img20.png" alt="">
			</div>
			<p class="text1">支付成功！</p>
			<p class="text2">实付金额：{{statusData.payMoney}}元</p>
			<div class="text3-box">
				<span class="text3">采购数量：{{statusData.quantity}}{{statusData.quantityUnit}}</span>
			</div>
			<div class="btn-box">
				<div class="button" @click="tohome">返回首页</div>
				<div class="button" @click="toAgaricOrder">查看订单</div>
			</div>
		</div>
		<div class="bg"></div>
		<ading-com :helpData="helpData"></ading-com>
	</div>
</template>

<script>
	import AdingCom from '@/components/homeCom/AidingCom.vue'
	export default {
		components: {
			AdingCom
		},
		data(){
			return {
				statusData: {},
				helpData: []
			}
		},
		created(){
			this.getHelpPoor()
			this.statusData = JSON.parse(this.$route.query.data)
			console.log(this.statusData)
		},
		methods: {
			// 精准扶贫
			getHelpPoor() {
				let postData = {
					pgCt: 1,
					pgSz: 10
				}
				this.$api.get('/api/fungus/product_list', postData)
					.then(({data}) => {
						this.helpData = data.records;
						if(data.records.length > 2){
							this.helpData.length = 2; // 只展示两条数据
						}
					})
			},
			// 返回首页
			tohome(){
				this.$router.push({
					path: '/'
				})
			},
			// 跳到木耳订单列表
			toAgaricOrder(){
				this.$router.push({
					path: '/my/agaricOrderDetail',
					query: {
						orderId: this.statusData.fungusOrderId
					}
				})
			}
		}
	}
	
	
</script>

<style lang="scss" scoped>
	@import "@/assets/css/homeCom.scss";
	.active{
		background: #D0CFCF !important;
	}
	
	.bg{
		width: 100%;
		height: 10px;
		background-color: #f8f8f8;
	}
	.status {
		background-color: #fff;
		.content{
			padding-bottom: 24px;
			.status-imgbox{
				margin-top: 60px;
				text-align: center;
				margin-bottom: 22px;
				img{
					width: 144px;
					margin-right: 20px;
				}
			}
			.text1{
				font-size: 20px;
				color: #344047;
				font-weight: 500;
				text-align: center;
				margin-bottom: 16px;
			}
			.text2{
				font-size: 16px;
				color: #5D6164;
				text-align: center;
				margin-bottom: 10px;
			}
			.text3-box{
				display: flex;
				justify-content: center;
				padding: 0 79px;
				margin-bottom: 48px;
				.text3{
					color: #969C9E;
				}
			}
			.btn-box{
				display: flex;
				justify-content: space-between;
				padding: 0 49px;
				.button{
					width: 120px;
					height: 36px;
					line-height: 36px;
					border: 1px solid #31BC8D;
					color: #31BC8D;
					border-radius: 30px;
					text-align: center;
					font-size: 16px;
				}
			}
		}
		.list-head {
			width: 100%;
			display: flex;
			height: 48px;
			line-height: 48px;
			border-bottom: 1px solid #f2f2f2;
			padding: 0 16px;
			h3{
				font-size: 16px;
				color: #344047;
				font-weight: 500;
				margin-left: 10px;
				float: left;
			}
			.list-head-icon{
				width: 100%;
				display: flex;
				align-items: center;
				img{
					width: 24px;
					vertical-align: middle;
					margin-bottom: 4px;
				}
			}
		}
		.purchase {
			background-color: #fff;
			width: 100%;
			.list {
				border-bottom: 1px solid #f2f2f2;
				.ul {
					width: 75% !important;
					border: none;
					float: left;
					.center {
						justify-content: space-between;
						.address {
							font-size: 12px;
							color: #969C9E;
							float: right;
						}
					}
					
				}
				.purchase-btn {
					width: 25%;
					height: 110px;
					display: flex;
					justify-content: center;
					align-items: center;
				
					.bind-btn {
						width: 68px;
						height: 28px;
						line-height: 28px;
						background: linear-gradient(90deg, #31BC8D 0%, #A6E29B 100%);
						color: #fff;
						font-size: 14px;
						box-shadow: none;
						border-radius: 14px;
					}
				}
			}
		}
	}
	
	

	
	
	
</style>
